<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            margin-top: 30px;
            width: 500px;
        }

        table,
        th,
        td {
            border: 1px solid black;
        }
    </style>
</head>

<body>


    <form class="navbar-form pull-right" autocomplete="off">
        <input type="text" style="width: 200px;" id="uname" placeholder="请输入姓名">
        <input type="text" style="width: 200px;" id="sex" placeholder="请输入性别">
        <input type="text" style="width: 200px;" id="age" placeholder="请输入年龄">
        <button type="submit" class="btn btn-default" id="btn">提交</button>
    </form>


    <table class="table table-hover ">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>操作</th>

            </tr>
        </thead>
        <tbody id="tb">
        </tbody>
    </table>


    <script>
        const tb = document.querySelector('#tb')
        const uname = document.querySelector('#uname')
        const sex = document.querySelector('#sex')
        const age = document.querySelector('#age')
        render()
        // 1.点击提交按钮，让用户输入的内容分别加入到表格对应的列表中
        const form = document.querySelector('form')
        form.addEventListener('submit', function (e) {
            e.preventDefault()
            if (uname.value.length == 0 && sex.value.length == 0 && age.value.length == 0) {
                alert('请输入内容')
            }
            const msg = getData()
            msg.push({
                uname: uname.value,
                sex: sex.value,
                age: age.value
            })
            setData(msg)
            getData()
            render()
            form.reset()
        })


        // 删除模块
        // 通过事件委托，为父元素注册事件
        document.querySelector('#tb').addEventListener('click', function (e) {
            if (e.target.tagName === 'A') {
                // console.log(e.target.dataset.id);
                const data = getData()
                data.splice(e.target.dataset.id, 1)
                setData(data)
                render()
            }
        })


        // 先获取本地存储的数据，有没有返回空数组用于存放后续数据
        // 封装本地获取函数
        function getData() {
            if (localStorage.getItem('msg')) {
                return JSON.parse(localStorage.getItem('msg'))
            }

            else {
                return []
            }

        }


        // 封装渲染页面函数
        function render() {
            const msg = getData()
            const newMsg = msg.map(function (item, i) {
                //渲染页面 
                return `
                <tr>
                <td>${item.uname}</td>
                <td>${item.sex}</td>
                <td>${item.age}</td>
                <td> <a href="javascript:;" data-id=${i}>删除</a>  </td>
                </tr>
                `

            })
            tb.innerHTML = newMsg.join('')
        }

        // 封装本地存储函数
        function setData(data) {
            // 将用户输入表单的内容存入本地
            localStorage.setItem('msg', JSON.stringify(data))
        }



    </script>





</body>

</html>